const range = 50;
const xspeed = 1;
const changeAngle = 0.1;
const half = 2;

var g_winReq, g_canvas, g_context, g_hare, g_angle;

function changeHare()
{
    g_hare.x += xspeed;
    g_hare.y = g_canvas.height / 3 + Math.sin( g_angle ) * range;
    g_angle += changeAngle;
    g_hare.ySkew = -Math.sin( 0.7854 );
    g_hare.xSkew = Math.sin( 0.7854 );
    g_hare.scaleY = Math.cos( 0.7854 );
    g_hare.scaleX = Math.cos( 0.7854 );

}

function drawFrame( )
{
    g_winReq( drawFrame, g_canvas );
    g_context.clearRect( 0, 0, g_canvas.width, g_canvas.height );
    changeHare( );
    g_hare.draw( g_context );
}

function onloadHandler()
{
    g_winReq = winRequestAnimFrame();
    g_canvas = document.getElementById( 'canvas' );
    g_context = g_canvas.getContext( '2d' );   
    g_hare = new Hare();   
    g_angle = 0;

    drawFrame( );
}

window.onload = onloadHandler;    